<template>
  <div>
    <div aria-label="A complete example of page header">
      <el-page-header>
        <!-- <template #breadcrumb>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: './page-header.html' }">
              homepage
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <a href="./page-header.html">route 1</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>route 2</el-breadcrumb-item>
          </el-breadcrumb>
        </template> -->
        <template #content>
          <div class="flex items-center">
            <el-avatar class="mr-3" :size="32"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <span class="text-large font-600 mr-3"> 欢迎登录 {{ userInfo.name }} </span>
          </div>
        </template>
        <template #extra>
          <div class="flex items-center">
            <!-- <el-button>Print</el-button> -->
            <el-button type="danger" @click="exit" class="ml-2">退出</el-button>
          </div>
        </template>
        <el-descriptions :column="3" size="small" class="mt-4">
          <el-descriptions-item label="姓名">
            {{ userInfo.nickName }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{ userInfo.phone }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">{{ userInfo.age }}</el-descriptions-item>
          <el-descriptions-item label="性别">
            <el-tag :type="userInfo.sex == 1 ? 'primary' : 'success'" size="small">{{
              userInfo.sex == 1 ? "男" : "女"
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="描述"> {{ userInfo.desc }} </el-descriptions-item>
        </el-descriptions>
      </el-page-header>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import storage from "@/storage";
import { ref } from "vue";
const userInfo = ref<any>({});
const init = () => {
  userInfo.value = storage.get("userInfo");
};
init();
const exit = () => {
  storage.clear();
  router.replace("/");
  ElNotification.success("退出成功");
};
</script>

<style lang="scss" scoped>
:deep(.el-page-header__back) {
  display: none;
}
</style>
